<template>
    <el-table :data="tableData"
              :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
              border
    >
      <el-table-column prop="id" label="Id" width="120">
      </el-table-column>
      <el-table-column prop="no" label="账号" width="360">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="360">
      </el-table-column>
      <el-table-column prop="roleid" label="角色" width="200">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.roleId === 1 ? 'danger' : (scope.row.roleId === 2 ? 'primary' : 'success')"
              disable-transitions>{{scope.row.roleId === 1 ? '超级管理员' :
              (scope.row.roleId === 2 ? '管理员' : '用户')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="160">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.sex === 1 ? 'primary' : 'success'"
              disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="240">
      </el-table-column>
      <el-table-column prop="cz" label="操作" width="240">
        <el-button type="primary">新增</el-button>
        <el-button type="success">删除</el-button>
      </el-table-column>
    </el-table>
</template>

<script>
export default {
  name: "MyMain",
  data() {

    return {
      tableData: []
    }
  },
  beforeMount() {
   this.getlist();
    },
  methods: {
    getlist(){
      this.$axios.get(this.$url+'/user/list').then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }else {
          alert("获取数据失败")
        }
      })
    }
  }

}
</script>

<style scoped>

</style>